<template>
    <div class="index">
      <nav-bar></nav-bar>
      <div class="mid-width">
            <el-row tag="div" class="pox">

                <el-carousel class="verbox" height="42px" direction="vertical" :autoplay="true" indicator-position="none">
                  <el-carousel-item v-for="(item, index) in noticeTop" :key="index">
                    <router-link tag="a" :to="{path:'/detail/',query:{'featureId':item.newId}}" >
                      <h3 class="medium">&nbsp;&nbsp;<i class="el-icon-caret-left"></i>&nbsp;&nbsp;<small>通知公告：</small>&nbsp;&nbsp;{{ item.title }}</h3>
                    </router-link>
                  </el-carousel-item>
                </el-carousel>

            </el-row>

            <el-row><h3>&nbsp;</h3></el-row>

            <el-row :gutter="20">
              <el-col :span="16">
                <new-box :list=list @patch="msg" />
              </el-col>

              <el-col :span="8" tag="div" class="left-pox">
                <hot-list :hot-list=hotList />
              </el-col>

            </el-row>

            <!-- <div v-test='3'></div> -->
        </div>

      <footer-bar></footer-bar>
    </div>
</template>

<script>
import navBar from '../components/navbar'
import newBox from '../components/newBox'
import footerBar from '../components/footer'
import hotList from '../components/hotList'
import {apiData} from '../interface/api';
// import '../directive/test'
export default {
  name: 'index',
    data () {
        return {
        noticeTop:[],
        list:[
          {
            imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            title:"全球最难拿的卡22222",
            type:"前端技术",
            tagName:"爱科学",
            time:"2018-06-07",
            message:200,
            dec:"会议研究通过了南安市创建福建省森林城市工作有关事宜。会议指出，按照《福建省森林城市（县城）申报与考评办法》创建指标体系要求，城市生态系统以森林植被为主体，强调城乡一体化协调发展，全面提升城市森林绿化水平，改善城市生态环境，努力建设森林生态、森林产业和森林文化三大体系，确保在2019年9月底完成创建任务，并于10月通过省绿化委和省林业局验收，获得“福建省森林城市”称号。"
          },
          {
            imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            title:"中国十大帅哥11111111111",
            type:"博语",
            tagName:"得到分享",
            time:"2018-06-07",
            message:200,
            dec:"会议研究通过了南安市创建福建省森林城市工作有关事宜。会议指出，按照《福建省森林城市（县城）申报与考评办法》创建指标体系要求，城市生态系统以森林植被为主体，强调城乡一体化协调发展，全面提升城市森林绿化水平，改善城市生态环境，努力建设森林生态、森林产业和森林文化三大体系，确保在2019年9月底完成创建任务，并于10月通过省绿化委和省林业局验收，获得“福建省森林城市”称号。"
          },
          {
            imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            title:"帅得不是一点点",
            type:"互联网+",
            tagName:"技术文章",
            time:"2018-06-07",
            message:200,
            dec:"会议研究通过了南安市创建福建省森林城市工作有关事宜。会议指出，按照《福建省森林城市（县城）申报与考评办法》创建指标体系要求，城市生态系统以森林植被为主体，强调城乡一体化协调发展，全面提升城市森林绿化水平，改善城市生态环境，努力建设森林生态、森林产业和森林文化三大体系，确保在2019年9月底完成创建任务，并于10月通过省绿化委和省林业局验收，获得“福建省森林城市”称号。"
          }
        ],
        hotList:[
        {
          id:1,
          title:"申报与考评办法21",
          imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          dec:"会议指出，按照《福建省森林城市（县城）申报与考评办法》创建指标体系要求"
        },
        {
          id:2,
          title:"美计划调高对华商品增税31",
          imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          dec:"美计划调高对华商品增税，外交部：是呀与讹诈不会起作用"
        },
        {
          id:3,
          title:"美计划调高对华商品增税",
          imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          dec:"美计划调高对华商品增税，外交部：是呀与讹诈不会起作用"
        }
        ],
        loading: false
      }
    },
    computed: {
          noMore () {
            return this.list.length >= 20
          },
          disabled () {
            return this.loading || this.noMore
          }
        },
        methods:{
            async noticeList(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                if(res.data.code==200){
                    // console.log(res)
                    this.noticeTop = res.data.list
                }
            },
            async devTest(method, url, obj){
              const res = await apiData.fetchList(method, url, obj)
              console.log(res)
              if(res.data.code==200){
                console.log(res)
              }
            },
            load() {
              this.loading = true
              setTimeout(() => {
                this.list.push({
                  imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"中国十大帅哥",
                  type:"博语",
                  tagName:"得到分享",
                  time:"2018-06-07",
                  message:200,
                  dec:"会议研究通过了南安市创建福建省森林城市工作有关事宜。会议指出，按照《福建省森林城市（县城）申报与考评办法》创建指标体系要求，城市生态系统以森林植被为主体，强调城乡一体化协调发展，全面提升城市森林绿化水平，改善城市生态环境，努力建设森林生态、森林产业和森林文化三大体系，确保在2019年9月底完成创建任务，并于10月通过省绿化委和省林业局验收，获得“福建省森林城市”称号。"
                })
                this.loading = false
              }, 500)
            },
            msg(en){
              console.log(en)
            }
        },
        mounted() {
            this.noticeList("post", "/web/newsList?pageNum=1&pageSize=100", {typeId:0})
            // this.devTest("get", "/", {})
        },
        components: {
          navBar , newBox, footerBar, hotList
        }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .index {
        div {
            a{
                color: #3c3c3c;
                text-decoration: none;
                &:hover{
                    color: #009688;
                }
            }
            .el-carousel__item h3 {
                color: #475669;
                font-size: 18px;
                opacity: 0.75;

                margin: 0;
                &:nth-child(2n) {
                    background-color: #99a9bf;
                }
                &:nth-child(2n+1) {
                    border:1px solid #d3dce6;
                }
                &:nth-child(1) {
                    line-height: 38px;
                }
            }
            .text {
                font-size: 14px;
            }

            .item {
                line-height: 25px;
                margin-bottom: 18px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }

            .img-src{
                /*max-width: unset;*/
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }
            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }

        }
        .pox{
          position: sticky;
          top: 60px;
          z-index: 3;
          padding-top: 18px;
          background-color: #fff;
        }
    }

</style>
